{% from "macros/forms.html" import form_input, form_select, form_input_content, form_switch %}
{% from "macros/datatable.html" import datatable %}

{% set form_error = form_error | default({}) %}
{% set roles = roles | default([]) | tojson %}
<div class="bg-base-100 p-4">
  <h1 class="text-3xl font-bold mb-5 w-3/4 ml-[10%]">{{ submit_text }}</h1>
  <p class="text-base-content/60 text-[0.7rem] mb-5 w-1/2 ml-[10%]">ID: {{ acl.id }}</p>

  <form id="acl-form" class="w-3/4 ml-[10%]" {{ form_action }} hx-swap="innerHTML"  hx-target="#form-container" hx-target-error="#form-container">
    {% include "acl/acl_form_warning.html" %}
    {% include "partials/admin_form_error.html" %}
    {{ form_input('Name', 'name', acl.name, form_error.name) }}
    {{ form_input('Description', 'description', acl.description, required=False, invalid_msg=form_error.description) }}

    <div class="join gap-1 w-3/4">
      <label class="select w-full">
        <span class="label">Item Type*</span>
        <select id="item_type"
                name="item_type"
                required
                class="validator select w-full"
                hx-get="{{ url_for('admin.acl_item_ids') }}"
                aria-required="true"
                required
                hx-trigger="change"
                hx-include="#item_type"
                hx-target="#item_ids"
                hx-swap="innerHTML">
          {% if not acl.item_type %}<option value="" selected disabled>Select an item type</option>{% endif %}
          {% for option in item_types -%}
            <option value="{{ option.id }}" {% if option.id == acl.item_type %}selected{% endif %}>{{ option.name }}</option>
          {% endfor -%}
        </select>
      </label>
      <label class="select w-full" id="item_ids">
        <span class="label">Item ID*</span>
        <select name="item_id" required aria-required="true" disabled class="validator select w-full">
          {% for option in item_ids -%}
            <option value="{{ option.id }}" {% if option.id == acl.item_id %}selected{% endif %}>{{ option.name }}</option>
          {% endfor -%}
        </select>
      </label>
    </div>

    <div class="join gap-1 w-3/4 m-5">
      {{ form_switch('Enabled', 'enabled', acl.enabled, required=False, width='w-1/4') }}
      {{ form_switch('Read Only', 'read_only', acl.read_only, required=False, width='w-1/4') }}
    </div>
    {{ datatable(table_id='roles-table', data=roles, columns=columns, selected_items=acl.roles, selectable=true, input_name="roles[]", headline="Roles", width="w-3/4") }}
    <input type="submit" class="btn btn-primary w-full" value="{{ submit_text }}" />
  </form>
</div>
